<!DOCTYPE html>
<html>
	<head>
		<title>Colspan in grid</title>
		<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8">
		<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="../common/samples.css">
		<script src="../common/testdata.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class='header_comment'>Colspan in grid</div>
		<div id="testA"></div>

		<script type="text/javascript" charset="utf-8">

		webix.ready(function(){
			grida = webix.ui({
				container:"testA",
				view:"treetable",
				columns:[
					{ id:"id",	header:"", css:{"text-align":"right"},  	width:50},
					{ id:"value",	header:"Film title",	width:250,
						template:"{common.treetable()} #value#" },
					{ id:"chapter",	header:"Mode",	width:200}
				],
				autoheight:true,
				autowidth:true,

				data: [
					{ "id":"1", "$row":"value", "value":"The Shawshank Redemption", "open":true, "data":[
						{ "id":"1.1", "value":"Part 1", "chapter":"alpha"},
						{ "id":"1.2", "value":"Part 2", "chapter":"beta", "open":true, "data":[
							{ "id":"1.2.1", "value":"Part 1", "chapter":"beta-twin"},
							{ "id":"1.2.2", "value":"Part 1", "chapter":"beta-twin"}
						]},
						{ "id":"1.3", "value":"Part 3", "chapter":"gamma" }
					]},
					{ "id":"2", "$row":"value", "value":"The Godfather", "data":[
						{ "id":"2.1", "value":"Part 1", "chapter":"alpha" },
						{ "id":"2.2", "value":"Part 2", "chapter":"beta" }
					]}
				]
			});	
		});
		</script>
	</body>
</html>